<template>
  <a-modal
    :title="title"
    :width="1200"
    style="height:800px;"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleCancel"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div
      class="demo-infinite-container"
      :infinite-scroll-distance="10"
    >
      <a-list item-layout="horizontal"   :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta
          >
            <p slot="title" v-html="item"/>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </div>


  </a-modal>
</template>

<script>
  import Vue from 'vue'
  import { ACCESS_TOKEN } from '../../../store/mutation-types'
  import infiniteScroll from 'vue-infinite-scroll';

  export default {
    directives: { infiniteScroll },
    name: 'TimeLog',
    data() {
      return {
        value: 1,
        title: '实时日志',
        visible: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        data: [],
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
      }
    },
    created() {
    },
    methods: {
      // 开启实时日志
      startTimeLog() {
        this.visible = true
        this.data=[]
        this.initWebSocket()
      },
      initWebSocket: function () {
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        let host = window._CONFIG['host'] + window._CONFIG['domianURL']
        var url = host.replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/logging'
        const token = Vue.ls.get(ACCESS_TOKEN)
        console.log('access_token',token)
        url=url+"?access_token="+token
        console.log(url)
        this.websock = new WebSocket(url)
        this.websock.onopen = this.websocketOnopen
        this.websock.onerror = this.websocketOnerror
        this.websock.onmessage = this.websocketOnmessage
        this.websock.onclose = this.websocketOnclose
      },
      websocketOnclose: function (e) {
        console.log('connection closed (' + e + ')')
        if (e) {
          console.log('connection closed (' + e.code + ')')
        }
        this.reconnect()
      },
      websocketOnopen: function () {
        console.log('WebSocket连接成功')
        //心跳检测重置
        //this.heartCheck.reset().start();
      },
      websocketOnmessage: function (e) {
        console.log('-----接收消息-------', e.data)
        if(this.checkHtml(e.data)){
          this.data.push(e.data)
        }
        //心跳检测重置
        //this.heartCheck.reset().start();
      },
      websocketOnerror: function (e) {
        console.log('WebSocket连接发生错误')
        this.reconnect()
      },
      // 关闭日志
      handleCancel() {
        this.websock.close()
        this.close()
      },
      checkHtml(htmlStr) {
        var reg = /<[^>]+>/g
        return reg.test(htmlStr)
      },
      close() {
        this.$emit('close')
        this.visible = false
      }
    }
  }
</script>
<style>
  .demo-infinite-container {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    overflow: auto;
    padding: 8px 24px;
    height: 300px;
  }
</style>